<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="referrer" content="no-referrer">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>请完善您的信息</title>
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <link href="__CDN__/assets/homecss/indexone.css" rel="stylesheet">
    <link href="__CDN__/assets/homecss/indextwo.css" rel="stylesheet">
    <script src="__CDN__/assets/homecss/jquery-1.8.2.min.js"></script>
    <script src="__CDN__/assets/homecss/Validator.js"></script>
    <script src="__CDN__/assets/homecss/layer/layer_zh-cn.js"></script>
    <script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js" charset="utf-8" async="async"></script>
</head>
<body>

<div class="page-content">
    <div>
        <div>
            <div style="width: 100%;text-align: center;background: white;border-bottom: 1px solid #ebedf0;">
                <img id="useravater" style="width: 100px;height: 100px;border-radius: 50%; margin: 20px 0px;" src="__CDN__/assets/img/avatar.png"/>
            </div>


            <div class="van-address-edit">
                <div class="van-cell van-field"><div class="van-cell__title van-field__label">
                    <span>姓名</span>
                </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input type="text" id="username" placeholder="输入姓名" class="van-field__control">
                        </div>
                    </div>
                </div>
                <div class="van-cell van-field">
                    <div class="van-cell__title van-field__label">
                        <span>手机号</span>
                    </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input type="tel" placeholder="输入手机号" id="userphone" class="van-field__control">
                            <button id="sendcode" class="van-button--small van-button--normal van-button--gray ">
                                <span class="van-button__text" id="codemsg">验证码</span>
                            </button>
                            <button id="sendcode2" class="van-button--small van-button--normal van-button--gray ">
                                <span class="van-button__text" id="codemsg2"></span>
                            </button>
                        </div>
                    </div>
                </div>

                <div class="van-cell van-field"><div class="van-cell__title van-field__label">
                    <span>验证码</span>
                </div>
                    <div class="van-cell__value">
                        <div class="van-field__body">
                            <input type="tel" id="usercode" placeholder="输入验证码" class="van-field__control">
                        </div>
                    </div>
                </div>



                <div class="van-address-edit__buttons">
                    <button id="confirminfo" title="1" class="van-button van-button--danger van-button--normal van-button--block">
                        <span class="van-button__text">完善信息</span>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>
<script>

        //微信授权

        window.onload = function () {

            if (isWeixin()) {

                var wxConfig;
                var url =  window.location.href;
                var currentUrl = window.location.href.split('#')[0];//这里需要注意最好是通过后端渲染，避免出现失败

                console.log(encodeURIComponent(currentUrl))


                $.ajax({
                    data: {'url': encodeURIComponent(currentUrl)}, //encodeURIComponent解决2次分享签名失败的问题，后端要urldecode
                    type: "POST",
                    dataType   : "json",
                    url: "index/config",
                    success: function (json) {
                        if (json.code == 1) {
                            wxConfig = json.data;
                            //通过config接口注入权限验证配置，所需资料在后台通过签名算法获取
                            wx.config({
                                debug: false,
                                appId: wxConfig.appId,
                                timestamp: wxConfig.timestamp,
                                nonceStr: wxConfig.nonceStr,
                                signature: wxConfig.signature,
                                jsApiList: wxConfig.jsApiList
                            });
                            //wechatShare.options.isSignature = true;
                            //callback && callback(opts, wx);
                        }
                    }
                });

                // 成功
                wx.ready(function(){
                    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。

                });

                // 失败
                wx.error(function(res){
                    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
                    alert(JSON.stringify(res));
                });
            }else{
                layer.open({
                    type: 1
                    ,title: false //不显示标题栏
                    ,closeBtn: false
                    ,area: '300px;'
                    ,shade: 0.3
                    ,id: 'LAY_layuipro' //设定一个id，防止重复弹出
                    ,btnAlign: 'c'
                    ,moveType: 1 //拖拽模式，0或者1
                    ,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49;text-align: center; color: #fff; font-weight: 300;">请在手机微信端打开哦</div>'
                });
            }
        };


        //判断是否在微信中打开
        function isWeixin() {
            var ua = navigator.userAgent.toLowerCase();
            if (ua.match(/MicroMessenger/i) == "micromessenger") {
                return true;
            } else {
                return false;
            }
        }


        $(function () {
            var uid = "{$uid}";
            var username = "{$username}";
            if(username != ""){
                $("#username").val(username);
            }

            var avater = "{$avater}";
            if(avater != ""){
                $("#useravater").attr("src",avater);
            }

            //验证信息是否合法
            $("#confirminfo").click(function () {
                var flag = $(this).attr("title")
                if(flag == 2){
                    layer.msg("您已经完善了信息，无需再次操作",{"time":1000});
                    return
                }


                var username = $("#username").val();
                if(username == ''){
                    layer.msg("请输入姓名",{"time":1000});
                    return;
                }
                var userphone = $("#userphone").val();
                var message = checkPhone(userphone);
                if( message != "success"){
                    layer.msg(message,{"time":1000});
                    return;
                }

                var usercode = $("#usercode").val();
                if(usercode == ''){
                    layer.msg("请输入验证码",{"time":1000});
                    return;
                }

                //完善信息
                $.ajax({
                    type: "POST",
                    url: "index/updataInfo",
                    data: {uid:uid, username:username,usercode:usercode,userphone:userphone},
                    dataType: "json",
                    success: function(data){
                        console.log(data)
                        if(data == 9){
                            layer.msg("验证码不能为空",{"time":1000});
                            return;
                        }else if(data == 8){
                            layer.msg("验证码不对",{"time":1000});
                            return;
                        }else if(data == 2){
                            layer.msg("数据完善有误",{"time":1000});
                            return;
                        }else{
                            layer.msg("数据完善完成",{"time":1000});
                            $("#confirminfo").attr("title",2)
                            $("#confirminfo .van-button__text").html("信息已更新")
                        }
                    }
                });


            })

            //验证手机是否合法
            function checkPhone(userphone){
                // 电话包括移动 联通  电信
                var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(17[0-9]{1})|(15[0-3]{1})|(15[5-9]{1})|(18[0-9]{1}))+\d{8})$/;
                if(userphone == ''){
                    message = "手机号码不能为空！";
                }else if(userphone.length !=11){
                    message = "请输入有效的手机号码！";
                    flag=false;
                }
                /*
                else if(!myreg.test(userphone)){
                    message = "请输入有效的手机号码！";
                }*/
                else{
                    message = "success";
                }
                return message;
            }
            //发送验证码
            $("#sendcode").click(function () {
                var userphone = $("#userphone").val();
                var message = checkPhone(userphone);
                if( message != "success"){
                    layer.msg(message,{"time":1000});
                    return;
                }

                getRandomCode();

                $("#codemsg").html(60);

                //请求服务器

                //完善信息
                $.ajax({
                    type: "POST",
                    url: "index/sySendCode", //赛邮-云通信
                    data: {userphone:userphone},
                    dataType: "json",
                    success: function(data){
                        console.log(data)
                        layer.msg(data.msg,{"time":1000});
                        return;
                    }
                });


            })

            //倒计时
            var time = 60;
            //倒计时
            function getRandomCode() {
                $("#sendcode2").css("display","block")
                $("#sendcode").css("display","none")
                $('#codemsg').text("验证码");
                if (time === 0) {
                    time = 60;
                    $("#sendcode").css("display","block")
                    $("#sendcode2").css("display","none")
                    return;
                } else {
                    time--;
                    $('#codemsg2').text(time);
                }
                setTimeout(function() {
                    getRandomCode();
                },1000);


            }


        })

</script>
